<template>
  <el-row style="margin: 10px 0">
    <el-col v-for="link in linkInfos" class="allT hoverBox" :sm="{span:11,offset:1}" :class="dayModel===true?'lBColor':'dBColor'" style="border-radius: 10px;margin-bottom: 10px">
      <el-col :span="10" style="padding-left: 10px">
        <img :src="link.imgLink" width="100" height="100" style="border-radius: 100px">
      </el-col>
      <el-col :span="10" :offset="2" style="padding-top: 20px">
        <a :href="link.toLink" :class="dayModel===true?'LinkFont':'LinkFont1'">
          <div class="" v-text="link.name"></div>
          <div class="" v-text="link.description"></div>
        </a>
      </el-col>
    </el-col>
  </el-row>
</template>
<script>
import axios from "axios"
  export default {
    name: 'friendLink',
    data(){
      return{
        linkInfos: [],
      }
    },
    computed: {
      dayModel(){
        return this.$store.state.dayModel
      }
    },
    mounted(){
      axios.get("/getLink").then( (res) => {
        console.log(res.data)
        this.linkInfos = res.data;
      })
    }
  }
</script>
<style scoped>
.lBColor {
  background-color: white;
}
.dBColor {
  background-color: black;
}
.hoverBox:hover{
  box-shadow: 0 40px 40px -15px rgb(0 0 0 / 5%);
  transition: box-shadow .5s ease;
}
.LinkFont {
  color: black;
}
.LinkFont1 {
  color: white;
}
</style>